<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预约记录</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 面包屑导航 -->
<div class="layui-card">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a href="/">首页</a>
        
        <a><cite>预约列表</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="reserveTable" lay-filter="reserveTable"></table>
        </div>
    </div>
</div>
<!-- 状态修改对话框 -->
<script  th:inline="none" type="text/html" id="changeStatusDialog" style="display: none;">
    <form class="layui-form" style="padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">选择状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required">
                    <option value="">请选择状态</option>
                    <option value="1">待确认</option>
                    <option value="2">已确认</option>
                    <option value="3">已完成</option>
                    <option value="4">已取消</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" id="reserveIdInput">
        </div>
        <div class="layui-form-footer">
            <button class="layui-btn" lay-submit lay-filter="submitChangeStatus">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</script>

<script th:inline="none">

    function openChangeStatusDialog(reserveId) {
        // 打开对话框
        layer.open({
            type: 1,
            title: '修改预约状态',
            area: ['400px', '250px'],
            content: $('#changeStatusDialog').html(),
            success: function(layero, index) {
                // 初始化表单渲染（例如下拉框）
                layui.form.render();
                // 设置隐藏的 reserveId 输入框值
                $('#reserveIdInput').val(reserveId);
            }
        });
    }


    layui.use(['table'], function () {
        var table = layui.table;

        table.render({
            elem: '#reserveTable',
            url: '/ljk/coach/reserve/list',  // 后端接口地址
            page: true,                // 开启分页
            limit: 10,                 // 每页显示数量
            cols: [[
                { field: 'studentName', title: '学员姓名' },
                { field: 'coachName', title: '教练姓名' },
                { field: 'phone', title: '手机号' },
                { field: 'licenseType', title: '驾照类型',templet: function(d){
                    return d.licenseType ? d.licenseType : '未选择';
                }},
                { field: 'startTime', title: '起始时间' },
                { field: 'endTime', title: '结束时间' },
                { field: 'status', title: '状态',templet: function(d){
                    switch (d.status) {
                        case 1: return `<span class="layui-badge layui-bg-orange">待确认</span>`;
                        case 2: return `<span class="layui-badge layui-bg-blue">已确认</span>`;
                        case 3: return `<span class="layui-badge layui-bg-green">已完成</span>`;
                        case 4: return `<span class="layui-badge layui-bg-red">已取消</span>`;
                        default: return d.status;
                    }
                }},
                {
                    title: '操作',
                    templet: function(d) {
                        return '<button class="layui-btn layui-btn-xs" onclick="openChangeStatusDialog(' + d.id + ')">修改状态</button>';
                    }
                }
            ]]
        });



        // 监听状态修改表单提交
        layui.form.on('submit(submitChangeStatus)', function(obj) {
            var formData = obj.field; // 获取表单数据

            // 发送 AJAX 请求到后端
            $.ajax({
                url: '/ljk/coach/reserve/updateStatus', // 替换为实际的后端接口地址
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData), // 将表单数据转换为 JSON 字符串,
                success: function(response) {
                    if (response.code===0) {
                        layer.msg('状态修改成功');
                        layer.closeAll(); // 关闭对话框
                        table.reload('reserveTable'); // 刷新表格
                    } else {
                        layer.msg('状态修改失败：' + response.message, { icon: 2 });
                    }
                },
                error: function() {
                    layer.msg('请求失败，请稍后再试。', { icon: 2 });
                }
            });

            return false; // 阻止表单默认提交行为
        });
    });
</script>
</body>
</html>
